import React from 'react'
// 为什么样式文件要在顶部引入 ？？？
import './index.less'
import { Link } from 'react-router-dom'
import { Menu } from 'antd';
// 引入渲染列表的数据
import MenuConfig from './../../config/menuConfig'

const SubMenu = Menu.SubMenu;


class NavLeft extends React.Component {
    // constructor(props) {
    //     super(props)
    //     this.state = {
    //         List: []
    //     }
    // }

    componentWillMount(){
        const Lists = this.renderMenu(MenuConfig);

        this.setState({    //setState 一定要加括号！！！！
            Lists
        })
    }

    //菜单渲染
    renderMenu = (data) => {
        return data.map((item) => {
            // 如果有子元素，还要进行递归，直到遍历结束
            if(item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                        { this.renderMenu(item.children) }
                    </SubMenu>
                )
            }
            return <Menu.Item key={item.key}>
                <Link to={item.key}>{ item.title }</Link>
            </Menu.Item>
        })
    }

   
    render () {
        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="" />
                    <h1>Bicycle MS</h1>
                </div>
                <Menu theme="dark">
                    { this.state.Lists }
                </Menu>
            </div>
        )
    }
}


export default NavLeft